<template>
    <div>
      <div class="de">
        <!-- 二级路由出口 -->
        <router-view></router-view>
      </div>
   <div class="he">
     <router-link to="/article">面试经验</router-link>
    <router-link to="/collect">收藏</router-link>
    <router-link to="/like">喜欢</router-link>
    <router-link to="user">我的</router-link>
   </div>
    </div>
</template>
<style>
.de{
    width: 400px;
    height: 500px;
    background-color: #eda0a0;
}
.he {
    /* 使用Flex布局 */
    display: flex;
    /* 水平方向均匀分布 */
    justify-content: space-around;
    /* 垂直方向居中 */
    align-items: center;
    /* 设置容器宽度（可以根据需要调整） */
    width: 400px;
    /* 可以添加一些高度和背景色让导航栏更明显 */
   
}
.he a{
    text-decoration: none;
    color: black;
}
.he a.router-link-active{
    background-color: aqua;
}
</style>